<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sa="http://www.thymeleaf.org/extras/sa-token">

<head th:fragment="head">
	<meta charset="UTF-8">
	<script src="https://www.liyansheng.top/cdn/watermark.js"></script>
	<title>客房管理系统</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
		integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
		crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.9.8/layui.js"
		integrity="sha512-wr2CJEbfG2lCok8dbfh12ZK76eVe0/4XRacTqUi+G1b77x+SpbVyMGn6nf0mWyvEuOAp2TfpMuq6U8fob09xgA=="
		crossorigin="anonymous" referrerpolicy="no-referrer"></script>

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.9.8/css/layui.css"
		integrity="sha512-rS4sRT9gLRT9wNIcmJPoU7+DI1vteqW3Bm51AlhupZ6JUxMYLhk4dKeL7y2rPBsi3JKth+Oz/BNvNjQAnpWdiw=="
		crossorigin="anonymous" referrerpolicy="no-referrer" />
	<style>
		/* 使右侧导航项靠右 */

		.layui-nav-right {
			float: right;
		}
		.stat-box {
            background-color: #2F4056;
            color: white;
            text-align: center;
            padding: 20px;
            border-radius: 8px;
            margin: 10px;
            font-size: 24px;
        }
        .stat-box .title {
            font-size: 18px;
            margin-bottom: 10px;
        }
        .layui-row {
            margin-top: 30px;
        }
	</style>
</head>

<body>
	<!-- 导航栏 -->
	<ul class="layui-nav" th:fragment="nav">
		<li class="layui-nav-item">
			<a href="/" style="font-size: larger;">客房管理系统</a>
		</li>
		<li class="layui-nav-item">
			<a href="/room_manage">客房管理</a>
		</li>
		<li class="layui-nav-item" sa:hasRole="admin">
			<a href="/user_manage">操作员管理</a>
		</li>
		<li class="layui-nav-item">
			<a href="/check-in-record/list">入住记录</a>
		</li>
		<li class="layui-nav-item">
			<a href="/reservation/list">客房预订</a>
		</li>
		<li class="layui-nav-item">
			<a href="/fee-record/list">收费详情</a>
		</li>
		<!-- 右侧导航项 -->
		<li class="layui-nav-item layui-nav-right" id="loginBtn" sa:notLogin>
			<a href="/login">登录</a>
		</li>
		<li class="layui-nav-item layui-nav-right" id="logoutBtn" sa:login>
			<a href="/logout">退出</a>
		</li>
		<li class="layui-nav-item layui-nav-right">
			<img src="http://cdn.qiniu.liyansheng.top/img/avatar.png" class="layui-nav-img">
		</li>
	</ul>

	<div>
		<div style="text-align: center;background-color: hsl(203, 51%, 51%);color: white;height: 150px;">
			<h1 style="padding: 50px">实时数据</h1>
		</div>

		<div class="layui-container">
			<!-- 统计信息的四个方块 -->
			<div class="layui-row">
				<div class="layui-col-xs6 layui-col-sm3">
					<div class="stat-box" id="emptyRoom">
						<div class="title">空房数</div>
						<div id="emptyRoomCount" th:text="${map.freeCount}">0</div>
					</div>
				</div>
				<div class="layui-col-xs6 layui-col-sm3">
					<div class="stat-box" id="checkedIn">
						<div class="title">已入住数</div>
						<div id="checkedInCount"  th:text="${map.inCount}">0</div>
					</div>
				</div>
				<div class="layui-col-xs6 layui-col-sm3">
					<div class="stat-box" id="reserved">
						<div class="title">预订数量</div>
						<div id="reservedCount"  th:text="${map.bookCount}">0</div>
					</div>
				</div>
				<div class="layui-col-xs6 layui-col-sm3">
					<div class="stat-box" id="revenue">
						<div class="title">今日营业额</div>
						<div id="revenueAmount" th:text="${map.amount}">0.00</div>
					</div>
				</div>
			</div>
		</div>
	</div>

</body>



</html>